<template>
  <div>
    <router-view />
    <van-tabbar
      class="tabbar"
      v-model="active"
      :border="false"
      z-index="10"
      :placeholder="true"
      :safe-area-inset-bottom="true"
      @change="onChange"
    >
      <van-tabbar-item v-for="(t, i) in tabs" :key="i" @click.stop="toTop">
        <span v-if="!gotop || t.url != '/home' || active != 0">{{
          t.name
        }}</span>
        <template #icon>
          <i
            :class="[
              'iconfont',
              { [t.icon]: !gotop || t.url != '/home' || active != 0 },
              { 'icon-zhiding': gotop && t.url == '/home' },
            ]"
          ></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getScrollTop, getClientHeight } from "../../utils/index";

export default {
  data() {
    return {
      active: 0,
      tabs: [
        {
          url: "/home",
          name: "首页",
          icon: "icon-home",
        },
        {
          url: "/home/classification",
          name: "分类",
          icon: "icon-fenlei",
        },
        {
          url: "/home/cart",
          name: "购物车",
          icon: "icon-cat",
        },
        {
          url: "/home/user",
          name: "我的",
          icon: "icon-me",
        },
      ],
      gotop: false,
    };
  },
  created() {
    this.tabs.forEach((elem, i) => {
      if (elem.url == this.$route.path) {
        this.active = i;
      }
    });
  },
  mounted() {
    // 监听滚动条，判断是否显示置顶图标
    window.addEventListener(
      "scroll",
      () => {
        let scrolltop = getScrollTop();
        let height = getClientHeight();
        scrolltop > height / 2 ? (this.gotop = true) : (this.gotop = false);
      },
      true
    );
  },
  methods: {
    /**
     * 切换标签
     */
    onChange(index) {
      this.gotop = false;
      this.$router.replace(this.tabs[index].url);
    },
    /**
     * 点击回到顶部
     */
    toTop() {
      if (!this.gotop || this.tabs[this.active].url != "/home") return;
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>

<style lang="less">
.tabbar {
  height: 2rem !important;
  background: rgba(0, 0, 0, 0);
  .ios_footer();

  .van-tabbar {
    height: 2rem;
    .bg_color(rgba(255, 255, 255, 1));
    box-shadow: 0px -2px 38px 0px rgba(122, 122, 122, 0.15);

    .van-tabbar-item {
      font-size: 0.48rem;
      line-height: 0.48rem;
      font-family: PingFang SC;
      font-weight: 500;
      .font_color(@text-color-grey);

      .van-tabbar-item__icon {
        margin-bottom: 0.16rem;

        > i {
          font-size: 0.8rem;
          line-height: 0.8rem;
        }
      }
    }

    .van-tabbar-item--active {
      .font_color(rgba(243, 89, 100, 1));
    }
  }
}
</style>
